<template>
	<view>
		<view class="container">

			<!-- 内容区域 -->
			<scroll-view class="container--scroll-view" @scrolltolower="onScrollToLower" scroll-y="true" @scroll="onScrollEvent"
			 :style="[{'height':  scrollHeights}]">

				<!-- 砍价会场 -->
				<block v-if=" currentTab == 0 ">

					<!-- banner轮播 -->
					<!-- <diy-banner itemStyle=" banner.style }}" params=" banner.params }}" dataList=" banner.data }}"></diy-banner> -->

					<!-- 内容区域 -->
					<view class="bargain-hall">
						<!-- 商品列表 -->
						<view class="goods-item" v-for=" (item,index) in activeList.data " :key="index">
							<view @tap="onTargetActive(item.active_id)">
								<button form-type="submit" class="btn-normal" :data-id=" item.active_id ">
									<view class="goods-item--container dis-flex">
										<!-- 商品图片 -->
										<view class="goods-image">
											<image :src=" item.goods.goods_image "></image>
										</view>
										<view class="goods-info">
											<!-- 商品名称 -->
											<view class="goods-name">
												<text class="twolist-hidden">{{ item.goods.goods_name }}</text>
											</view>
											<!-- 参与的用户头像 -->
											<view v-if=" item.helps_count > 0 " class="peoples dis-flex">
												<view class="user-list dis-flex">
													<view v-for=" (help,indexss) in item.helps " :key="indexss" class="user-item-avatar">
														<image :src=" help.avatarUrl "></image>
													</view>
												</view>
												<view class="people__text">
													<text>{{ item.helps_count }}人正在砍价</text>
												</view>
											</view>
											<!-- 商品原价 -->
											<view class="goods-price">
												<text>￥{{ item.goods.goods_sku.goods_price }}</text>
											</view>
											<!-- 砍价低价 -->
											<view class="floor-price">
												<text class="small">最低￥</text>
												<text class="big">{{ item.floor_price }}</text>
											</view>
											<!-- 操作按钮 -->
											<view class="opt-touch">
												<view class="touch-btn">
													<text>立即参加</text>
												</view>
											</view>
										</view>
									</view>
								</button>
							</view>
						</view>
						<!-- 无数据提供的页面 -->
						<view v-if=" !isLoading && !activeList.data.length ">
							<view class="yoshop-notcont">
								<text class="iconfont icon-wushuju"></text>
								<text class="cont">亲，暂无砍价活动哦</text>
							</view>
						</view>
					</view>
				</block>

				<!-- 我的砍价 -->
				<block v-if=" currentTab == 1 ">
					<!-- 内容区域 -->
					<view class="bargain-hall">
						<!-- 商品列表 -->
						<view class="goods-item" v-for=" (item,end) in myList.data " :key="end">
							<view @tap="onTargetTask(item.task_id)" report-submit="true">
								<button form-type="submit" class="btn-normal" :data-id=" item.task_id ">
									<view class="goods-item--container dis-flex">
										<!-- 商品图片 -->
										<view class="goods-image">
											<image :src=" item.goods.goods_image "></image>
										</view>
										<view class="goods-info">
											<!-- 商品名称 -->
											<view class="goods-name">
												<text class="twolist-hidden">{{ item.goods.goods_name }}</text>
											</view>
											<!-- 砍价进度 -->
											<view class="task-rate">
												<block v-if=" item.status ">
													<text>已砍</text>
													<text class="col-m">{{ item.cut_money }}</text>
													<text>元，</text>
													<text>只差</text>
													<text class="col-m">{{ item.surplus_money }}</text>
													<text>元</text>
												</block>
												<block v-if=" item.is_floor ">
													<text>已砍至最低</text>
													<text class="col-m">{{ item.floor_price }}</text>
													<text>元</text>
												</block>
											</view>
											<!-- 任务状态 -->
											<view class="task-status dis-flex flex-y-center">
												<!-- 倒计时 -->
												<view v-if=" item.status " class="count-down dis-flex flex-y-center">
													<view class="clock-text">
														<text>剩余</text>
													</view>
													<view class="clock dis-flex">
														<view class="clock-time">
															<text>{{ countDownList[end].dynamic.hou }}</text>
														</view>
														<view class="clock-symbol">
															<text>:</text>
														</view>
														<view class="clock-time">
															<text>{{ countDownList[end].dynamic.min }}</text>
														</view>
														<view class="clock-symbol">
															<text>:</text>
														</view>
														<view class="clock-time">
															<text>{{ countDownList[end].dynamic.sec }}</text>
														</view>
													</view>
												</view>
												<view v-if=" !item.status " class="task-status__text">
													<text class="col-m">{{ item.is_buy ? '砍价成功' : '已结束' }}</text>
												</view>
											</view>
											<!-- 操作按钮 -->
											<view v-if=" item.status " class="opt-touch">
												<view class="touch-btn">
													<text>继续砍价</text>
												</view>
											</view>
										</view>
									</view>
								</button>
							</view>
						</view>
						<view v-if=" noMore " class="no-more f-28">亲, 没有更多了</view>
						<!-- 无数据提供的页面 -->
						<view v-if=" !isLoading && !myList.data.length ">
							<view class="yoshop-notcont">
								<text class="iconfont icon-wushuju"></text>
								<text class="cont">亲，暂未参与砍价活动哦</text>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>

			<!-- 底部选项卡 -->
			<view class="footer-fixed dis-flex">
				<!-- 砍价会场 -->
				<view class="tabbar-item flex-box " :class="currentTab == 0 ? 'item__active' : ''">
					<form @submit="onToggleTab" data-index="0" report-submit="true">
						<button form-type="submit" class="btn-normal">
							<view class="tabbar-item-content dis-flex flex-x-center flex-y-center">
								<view class="tabbar-item-icon">
									<text class="iconfont icon-shangcheng"></text>
								</view>
								<view class="tabbar-item-name">
									<text>砍价会场</text>
								</view>
							</view>
						</button>
					</form>
				</view>
				<!-- 分割线 -->
				<view class="tabbar-item__divider">
					<view class="divider-line"></view>
				</view>
				<!-- 我的砍价 -->
				<view class="tabbar-item flex-box" :class=" currentTab == 1 ? 'item__active' : '' ">
					<form @submit="onToggleTab" data-index="1" report-submit="true">
						<button form-type="submit" class="btn-normal">
							<view class="tabbar-item-content dis-flex flex-x-center flex-y-center">
								<view class="tabbar-item-icon">
									<text class="iconfont icon-sy-yh"></text>
								</view>
								<view class="tabbar-item-name">
									<text>我的砍价</text>
								</view>
							</view>
						</button>
					</form>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// 工具类
	import util from '../../../utils/util.js';
	// 倒计时插件
	import CountDown from '../../../utils/countdown.js';
	export default {
		computed: {
			scrollHeights() {
				return uni.upx2px(this.scrollHeight * 2) + 'px';
			}
		},
		data() {
			return {
				// 当前tab索引
				currentTab: 0,

				// 列表容器高度
				scrollHeight: null,

				// 列表容器滚动的位置
				scrollTop: 0,

				noMore: false, // 没有更多数据
				isLoading: true, // 是否正在加载中
				page: 1, // 当前页码

				// 时间记录
				countDownList: [],

				// 砍价会场商品列表
				activeList: [],

				// 我的砍价列表
				myList: [],
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			// 设置scroll-view高度
			_this._setListHeight();
			// 设置当前tab索引
			_this._setCurrentTab(options);
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			if (_this.scrollTop == 0) {
				// 获取列表数据
				_this._getList();
			}
		},
		methods: {
			/**
			 * 设置当前tab索引
			 */
			_setCurrentTab(options) {
				let _this = this;
				if (options.hasOwnProperty('tab')) {
					_this.setData({
						currentTab: options.tab
					});
				}
			},

			/**
			 * 设置商品列表高度
			 */
			_setListHeight() {
				let _this = this;
				let systemInfo = uni.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * (92 + 20)), // tap高度
					scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				_this.setData({
					scrollHeight
				});
			},

			/**
			 * 获取砍价活动列表
			 */
			getActiveList(isPage) {
				let _this = this;
				_this._get('bargain.active/lists', {
					page: _this.page || 1,
				}, (result) => {
					let resList = result.data.activeList,
						dataList = _this.activeList;
					if (isPage == true) {
						_this.setData({
							'activeList.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							activeList: resList,
							isLoading: false,
						});
					}
				});
			},

			/**
			 * 获取我的砍价列表
			 */
			getMyList(isPage) {
				let _this = this;
				_this._get('bargain.task/lists', {
					page: _this.page || 1,
				}, (result) => {
					let resList = result.data.myList,
						dataList = _this.myList;
					if (isPage == true) {
						_this.setData({
							'myList.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							myList: resList,
							isLoading: false,
						});
					}
					// 初始化倒计时组件
					_this._initCountDownData(result.data);
				});
			},

			/**
			 * 初始化倒计时组件
			 */
			_initCountDownData(data) {
				let _this = this;
				// 记录活动到期时间
				let countDownList = _this.countDownList;
				data.myList.data.forEach((item) => {
					countDownList.push({
						date: item.end_time,
					});
				});
				_this.setData({
					countDownList,
				});
				// 执行倒计时
				if (countDownList.length > 0) {
					CountDown.onSetTimeList(_this, 'countDownList');
				}
			},

			/**
			 * 记录滚动的位置
			 */
			onScrollEvent(e) {
				let _this = this;
				_this.setData({
					scrollTop: e.detail.scrollTop
				})
			},

			/**
			 * 切换tabbar
			 */
			onToggleTab(e) {
				let _this = this;
				// 保存formid
				_this.saveFormId(e.detail.formId);
				// 设置当前tabbar索引，并重置数据
				_this.setData({
					currentTab: e.currentTarget.dataset.index,
					activeList: [],
					myList: [],
					page: 1,
					isLoading: true,
					noMore: false,
				});
				// 获取列表数据
				_this._getList();
			},

			/**
			 * 跳转到砍价商品详情
			 */
			onTargetActive(active_id) {
				console.log(active_id);
				// 保存formid
				uni.navigateTo({
					url: '../goods/index?active_id=' + active_id
				})
			},

			/**
			 * 跳转到砍价商品详情
			 */
			onTargetTask(e) {
				console.log(e);
				// 保存formid
				uni.navigateTo({
					url: '../task/index?task_id=' + e
				})
			},

			/**
			 * 下拉到底部加载下一页
			 */

			onScrollToLower() {
				let _this = this,
					listData = _this.currentTab == 0 ? _this.activeList : _this.myList;
				// 已经是最后一页
				if (_this.page >= listData.last_page) {
					_this.setData({
						noMore: true
					});
					return false;
				}
				// 加载下一页列表
				_this.setData({
					page: ++_this.page
				});
				_this._getList(true);
			},

			/**
			 * 获取列表数据
			 */
			_getList(isPage) {
				let _this = this;
				_this.currentTab == 0 ? _this.getActiveList(isPage) : _this.getMyList(isPage);
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams();
				return {
					title: '砍价专区',
					path: '/pages/bargain/index/index?' +params
				};
			},
		}
	}
</script>

<style>
	.container {
		height: 100%;
	}

	.bargain-hall {
		padding-top: 20upx;
		/* padding-bottom: 50upx; */
	}

	/* 砍价商品 */

	.goods-item {
		margin-bottom: 20upx;
		background: #fff;
		padding: 20upx 16upx;
	}

	.goods-item:last-child {
		margin-bottom: 0;
	}

	.goods-item .goods-image image {
		display: block;
		width: 220upx;
		height: 220upx;
	}

	.goods-item .goods-info {
		width: 498upx;
		padding-top: 8upx;
		margin-left: 15upx;
		position: relative;
	}

	.goods-item .goods-info .goods-name {
		font-size: 28upx;
		min-height: 60upx;
	}

	/* 正在参与的用户 */

	.goods-item .goods-info .peoples {
		margin-top: 15upx;
	}

	.goods-item .goods-info .peoples .user-list {
		margin-right: 10upx;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar {
		margin-left: -8upx;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
		margin-left: 0;
	}

	.goods-item .goods-info .peoples .user-list .user-item-avatar image {
		display: block;
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
	}

	.goods-item .goods-info .peoples .people__text {
		font-size: 24upx;
		color: #818181;
	}

	/* 商品原价 */

	.goods-item .goods-info .goods-price {
		margin-top: 15upx;
		color: #818181;
		font-size: 25upx;
		text-decoration: line-through;
	}

	/* 砍价底价 */

	.goods-item .goods-info .floor-price {
		color: #fc1e56;
	}

	.goods-item .goods-info .floor-price .small {
		font-size: 24upx;
	}

	.goods-item .goods-info .floor-price .big {
		font-size: 32upx;
	}

	/* 我的砍价 */

	/* 砍价进度 */

	.goods-item .task-rate {
		font-size: 25upx;
		color: #a4a4a4;
		margin-top: 15upx;
	}

	/* 砍价状态 */

	.task-status {
		margin-top: 32upx;
		height: 58upx;
		/* line-height: 58upx; */
	}

	.task-status__text {
		font-size: 26upx;
	}

	/* 倒计时 */

	.count-down {
		font-size: 26upx;
		height: 40upx;
	}

	.count-down .clock-text {
		margin-right: 10upx;
	}

	.count-down .clock-time {
		background: #252525;
		color: #fff;
		padding: 0 8upx;
		line-height: 40upx;
		border-radius: 8upx;
	}

	.clock-symbol {
		padding: 0 8upx;
	}

	/* 立即参加按钮 */

	.opt-touch {
		position: absolute;
		bottom: 0;
		right: 10upx;
	}

	.touch-btn {
		color: #fff;
		font-size: 28upx;
		background: #d3a975;
		border-radius: 30upx;
		padding: 10upx 28upx;
	}

	/* 底部选项卡 */

	.tabbar-item {
		font-size: 30upx;
	}

	.tabbar-item .tabbar-item-content {
		height: 92upx;
	}

	.tabbar-item.item__active .tabbar-item-content {
		color: #ff1d1c;
	}

	.tabbar-item .tabbar-item-icon {
		margin-right: 15upx;
	}

	/* 分割线 */

	.tabbar-item__divider {
		padding: 18upx 0;
	}

	.divider-line {
		width: 1upx;
		height: 100%;
		background: #ddd;
	}
</style>
